<template>
	<div class="best-wrap">
		<module-title title="项目信息">
			<el-button icon="el-icon-circle-plus-outline" @click="clickAddProject">添加适用项目</el-button>
		</module-title>
		<!-- 项目切换标签 -->
		<div class="tags-box">
			<el-tag
				v-for="(item, index) in formList"
				:key="index"
				:closable="!item.notEditMain"
				class="tags"
				:class="{'active':selectIndex === index}"
				@click="selectIndex = index"
				@close="clickDelProject(item, index)"
			>
				{{ item.projectName || '未选择项目' }}
				<img
					v-if="item.isSaveStatus && item.isSaveFull"
					src="@rc/assets/images/success-ico.png"
					class="success-ico-img"
				>
			</el-tag>
		</div>
		<!-- 项目表单集合 -->
		<div v-for="(item, index) in formList" :key="index" v-show="selectIndex === index">
			<el-form
				class="the-form"
				label-width="130px"
				label-suffix="："
				:model="item"
				:rules="rules"
				ref="form"
			>
				<el-form-item label="项目" prop="projectId">
					<el-input v-if="item.isDisableProject" :disabled="true" :value="item.projectName" />
					<cascader-project
						v-show="!item.isDisableProject"
						ref="projectCascader"
						class="w-max"
						:value="item.projectId"
						:disabled="item.notEditMain"
						@change-watch="changeProject($event, item, index)"
						@ready="(...$event) =>{
							projectReadyDisable($event[1], item)
						}"
					/>
				</el-form-item>
				<el-form-item label="科目" prop="subjectList">
					<select-subject
						ref="subjectSelect"
						class="w-max"
						disabled-del-text="该课件已在使用中，不能删除已存在的科目"
						v-model="item.subjectList"
						:project-id="item.projectId.length ? item.projectId[item.projectId.length - 1 ] :''"
						:multiple="true"
						:disabled-id-list="item.notEditMain ? item.oldSubjectList : []"
						:check-full-list="item.subjectFullList"
						@change="changeSubject(item)"
					/>
				</el-form-item>
				<el-form-item label="系列课" prop="seriesCourseList">
					<cascader-course
						ref="courseCascader"
						class="w-max"
						v-model="item.seriesCourseList"
						:project-id="item.projectId.length ? item.projectId[item.projectId.length - 1 ] :''"
						:props-options="{multiple: true}"
						@change="item.isSaveStatus = false"
					/>
				</el-form-item>
				<el-form-item label="适用年份" prop="applicableYearId">
					<select-year
						ref="yearSelect"
						class="w-max"
						v-model="item.applicableYearId"
						:year.sync="item.applicableYear"
						:check-full-list="[{projectyearId:item.applicableYearId, projectyearYear:item.applicableYear}]"
						:project-id="item.projectId.length ? item.projectId[item.projectId.length - 1 ] :''"
						@ready="yearLoadReady($event, item)"
						@change="item.examCycleId = ''; item.isSaveStatus = false"
					/>
				</el-form-item>
				<el-form-item label="考试周期" prop="examCycleId">
					<select-period
						ref="periodSelect"
						class="w-max"
						:label="item.examCycleName"
						v-model="item.examCycleId"
						:project-id="item.projectId.length ? item.projectId[item.projectId.length - 1 ] :''"
						:pyp-year="item.applicableYear"
						:check-full-list="[{pypId:item.examCycleId,pypseqName:item.examCycleName}]"
						@ready="periodLoadReady($event, item)"
						@change="item.isSaveStatus = false"
					/>
				</el-form-item>
				<!-- 章节知识点关联区块 -->
				<template v-if="isShowRelevance && item.projectId.length">
					<template v-if="isInChapterRules(item.projectId[item.projectId.length - 1 ])">
						<div class="title-box">
							<span class="title">
								<span v-if="chapterRulesObj.isRequired" class="c-red">*</span> 章节目录关联：
							</span>
							<el-button
								icon="el-icon-circle-plus-outline"
								@click="updateSubjectListCache();isShowChapterDialog = true"
							>
								修改关联
							</el-button>
						</div>
						<ul v-if="item.rcChapterList.length" class="check-list">
							<li
								v-for="(chapterItem, chapterIndex) in item.rcChapterList"
								:key="chapterIndex"
								class="item"
							>
								<div class="text">{{ chapterItem.title }}</div>
								<el-button class="btn" type="text" @click="delChapterItem(item,chapterIndex)">删除</el-button>
							</li>
						</ul>
					</template>
					<template v-if="isInKnowledgeRules(item.projectId[item.projectId.length - 1 ])">
						<div class="title-box">
							<span class="title">
								<span v-if="knowledgeRulesObj.isRequired" class="c-red">*</span> 知识点关联：
							</span>
							<el-button
								icon="el-icon-circle-plus-outline"
								@click="updateSubjectListCache();isShowKnowledgeDialog = true"
							>
								添加关联
							</el-button>
						</div>
						<ul v-if="item.rcCknowledgeList.length" class="check-list">
							<li
								v-for="(knowledgeItem, knowledgeIndex) in item.rcCknowledgeList"
								:key="knowledgeIndex"
								class="item"
							>
								<div class="text">{{ knowledgeItem.title }}</div>
								<el-button class="btn" type="text" @click="delKnowledgeItem(item,knowledgeIndex)">删除</el-button>
							</li>
						</ul>
					</template>
				</template>
				<div class="submit-box">
					<el-button type="primary" @click="onSubmit(index)">保存项目信息</el-button>
				</div>
			</el-form>
		</div>
		<!-- 章节编辑弹窗 -->
		<chapter-dialog
			v-if="isShowChapterDialog"
			:visibly.sync="isShowChapterDialog"
			:project-name="formList.length ? formList[selectIndex].projectName : ''"
			:subject-list="subjectListCache"
			:default-data="formList.length ? formList[selectIndex].rcChapterList : []"
			@submit="updateChapter"
		/>
		<!-- 知识点编辑弹窗 -->
		<knowledge-dialog
			v-if="isShowKnowledgeDialog"
			:visibly.sync="isShowKnowledgeDialog"
			:project-name="formList.length ? formList[selectIndex].projectName : ''"
			:subject-list="subjectListCache"
			:chapter-list="formList.length ? formList[selectIndex].rcChapterList : []"
			:default-data="formList.length ? formList[selectIndex].rcCknowledgeList : []"
			@submit="updateKnowledge"
		/>
	</div>
</template>

<script src="./project.mjs"></script>
<style lang="less" scoped src="./project.less"></style>
